<template>
    <div>
        <el-dialog :title="isAdd ? '添加商品规格' : '编辑商品规格'" :visible.sync="isShow" :before-close="cancel" center>
            <el-form :model="specForm" :rules="rules" ref="specinfo">
                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="specsname">
                    <el-input v-model="specForm.specsname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item v-for="(item, index) in attrArr" :key="index" label="规格属性" :label-width="formLabelWidth">
                    <el-input class="inp_Info" v-model="item.value" autocomplete="off"></el-input>
                    <el-button v-if="index == 0" @click="add_info" type="primary">新增规格属性</el-button>
                    <el-button @click="del_info(index)" v-else type="danger">删除</el-button>
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="specForm.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="confirm" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { specsAdd, specsInfo, specsEdit } from '../../request/api'
import { mapActions } from 'vuex'
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {
            formLabelWidth: '120px',
            specForm: {
                specsname: '',
                attrs: '',
                status: 1
            },
            rules: {
                specsname: [
                    { required: true, message: "请输入规格名称", trigger: "blur" },
                    { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
                ]
            },
            attrArr: [
                {
                    value: ''
                }
            ]
        }
    },
    methods: {
        ...mapActions({
            getSpec: 'spec/getSpecsAction',
            getCount: 'spec/getCountAction',
        }),
        add_info() {
            if (this.attrArr.length > 4) {
                this.$message.warning('最多增加4项规格')
            } else {
                this.attrArr.push({
                    value: ''
                })
            }
        },
        del_info(n) {
            this.attrArr.splice(n, 1)
        },
        //取消
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        reset() {
            this.specForm = {
                specsname: '',
                attrs: '',
                status: 1
            }
            this.$refs.specinfo.resetFields();
            this.attrArr = [
                { value: '' }
            ]
        },
        //数据回显函数
        lookup(id) {
            specsInfo({ id }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.specForm = res.list[0]
                    this.specForm.id = id

                    this.specForm.attrs.map((item, idx) => {
                        if (idx == 0) {
                            this.attrArr[0].value = item
                        } else {
                            this.attrArr.push({
                                value: item
                            })
                        }
                    })
                }
            })
        },
        //确定
        confirm() {
            this.$refs.specinfo.validate(valid => {
                if (valid) {
                    this.specForm.attrs = this.attrArr.map(item =>item.value).join(',')
                    console.log(this.specForm);
                    if (this.isAdd) {
                        specsAdd(this.specForm).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                //重新获取列表
                                this.getSpec()
                                //重新获取总条数
                                this.getCount()
                                //关闭弹框
                                this.cancel()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    } else {
                        specsEdit(this.specForm).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.msg)
                                //重新获取列表
                                this.getSpec()
                                //重新获取总条数
                                this.getCount()
                                //关闭弹框
                                this.cancel()
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
.inp_Info {
    width: 67%;
}
</style>